<template>
  <div class="menubox">
    <div class="header2">
      <b style="font-size: 24px;" v-if="showflag" >添加新的菜单</b>
      <b style="font-size: 24px;" v-if="!showflag">修改当前菜单</b>
      <b style="font-size: 24px;" @click="back">返回</b>
    </div>
    <div class="menufrom">
      <el-form ref="myForm" :model="formData" class="form" :rules="rules">
        <el-form-item label="菜单名:" prop="menuName">
          <el-input v-model="formData.menuName" placeholder="请输入新的菜单名"></el-input>
        </el-form-item>
        <el-form-item label="权限:" prop="roleName">
          <!-- <el-input  placeholder="请选择权限" suffix-icon="el-icon-arrow-right" @click.native="show" v-show="!showflag"
          v-model="rolelist">
          </el-input> -->
          <el-input placeholder="请选择权限" v-model="rolelist" suffix-icon="el-icon-arrow-right" @click.native="show">
          </el-input>
        </el-form-item>
        <el-form-item label="访问路径:" prop="path">
          <el-input v-model="formData.menuPath" placeholder="请填写访问路径"></el-input>
        </el-form-item>
        <el-form-item label="父级菜单:" prop="parentMenu">
          <!-- <el-input v-model="formData.parentMenu" placeholder="请选择父级菜单"></el-input> -->
          <el-select v-model="formData.menuSuperiors" placeholder="请选择父级菜单">
            <el-option :label="x.menuName" :value="x.menuId" v-for="(x,index) in menulist" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <div class="btngroup">
          <button class="go btn" @click.prevent="createmenu('myForm')" v-if="showflag">立即添加</button>
          <button class="go btn" @click.prevent="updatemenu('myForm')" v-if="!showflag">立即修改</button>
          <button class="cancel btn" @click.prevent="resetForm('myForm')">取消</button>
        </div>
      </el-form>
      <el-dialog
					title="请选择角色"
					:visible.sync="dialogFormVisible"
					width="30%"
					center>
            <template>
              <el-checkbox-group v-model="checkList2">
                <el-checkbox :label="x.roleName" v-for="(x,index) in checkList" :value="x.roleId" :key="index">{{ x.roleName }}</el-checkbox> 
              </el-checkbox-group>     
            </template>
					<span slot="footer" class="dialog-footer" >
            <el-button type="primary" @click="addrole">确 定</el-button>
						<el-button @click="dialogFormVisible = false">取 消</el-button>
					</span>
				</el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      showflag: true,
      baseurl:require('../js/baseUrl').baseUrl,
      pageSize:"5",
      alltotals:0,
      dialogFormVisible:false,
      menuNametwo:"",
      menuId:0,
      menulist:[],
      checkList: [],
      checkList2:[],
      roleIds:[],
      parentMenuid:0, // 修改对应的父级id
      rolelist:"",   //菜单名字
      formData:{
        menuName:'',
        roleName:"",
        menuPath:"",
        menuSuperiors:""
      },
      rules:{
        menuName:[
        { required: true, message: '请填写菜单名', trigger: 'blur' }
        ],
        menuPath:[
        { required: true, message: '请填写路径', trigger: 'blur' }
        ],
        menuSuperiors:[
        { required: true, message: '请选择父级菜单', trigger: 'blur' }
        ]
       
      }
    }
   
  },
  methods:{
    //根据所查询的菜单，判断要修改默认的父级菜单对应的菜单id
    findparentId(){
      this.menulist.forEach(v=>{
        if(this.formData.parentMenu==v.menuName){
          this.parentMenuid=v.menuId
        }
      })
    },
    //查询菜单
    findmenu(){
      let none={
        menuName:"无",
        parentMenu:"0",
        menuId:"0"
      }
      this.$http.post(this.baseurl+"menu/allMenu",{
      }).then(res=>{
       if(res.data.code==200){
        this.menulist=res.data.data.menuList
        this.menulist.unshift(none)
       }else{
        this.$message.error(res.data.msg)
       }
      })
    },
    //添加菜单
    createmenu(formData){
      this.$refs[formData].validate((valid) => {
        if(this.rolelist.length==0){
            this.$message.error("请填写全部信息")
          }else{
            if (valid) {

                if(this.formData.menuSuperiors ==""){
                  this.formData.menuSuperiors=0
                }
                this.$http.post(this.baseurl+"menu/insertMenu",{
                menuName:this.formData.menuName,
                menuPath:this.formData.menuPath,
                roleIds:this.roleIds,
                menuSuperiors:this.formData.menuSuperiors
              }).then(res=>{
                  if(res.data.code==200){
                    this.$message.success("添加成功")
                    this.$router.push("/menumanager")
                  }else{
                    this.$message.error(res.data.msg)
                  }
              })
              } else {
                this.$message.error("请填写全部信息")
                return false;
              }
          }
       
      });
   
       
    },
    //修改菜单
     updatemenu(){
      if(this.formData.parentMenu=="无"){
        this.formData.parentMenu=0
      }else{
        this.findparentId()
      }
        this.$http.post(this.baseurl+"menu/update",{
          menuId:this.formData.menuId,
          menuName:this.formData.menuName,
          menuPath:this.formData.menuPath,
          roleIds:this.roleIds,
          menuSuperiors:this.formData.menuSuperiors
        }).then(res=>{
           if(res.data.code==200){
            this.$message.success("修改成功")
            setTimeout(() => {
              this.$router.push("/menumanager")
            }, 500);
           }else{
            this.$message.error(res.data.msg)
           }
        })
    },
    //取消
    resetForm(myForm){
      this.$refs[myForm].resetFields();
    },
    //显示权限
    showroleName(){
      this.rolelist=""
      this.roleIds=[]
      console.log(this.checkList2)
      for(var i=0;i<this.checkList2.length;i++){
        if(i>0){
          console.log(2222222)
          this.rolelist=this.rolelist+" / "
        }
        this.rolelist=this.rolelist+this.checkList2[i]
        this.checkList.forEach(v=>{
          if(this.checkList2[i]==v.roleName){
            this.roleIds.push(v.roleId)
          }
        })
      }
    },
    addrole(){
      this.dialogFormVisible = false
      this.showroleName()
    },
    show(){
      this.dialogFormVisible=true
    },
    back(){
      this.$router.push("/menumanager")
    },
    // getrole(){
    //   this.$http.post(this.baseurl+"role/find",{
    //     pageIndex:"1",
    //     pageSize:this.pageSize+""
    //   }).then(res=>{
    //     if(res.data.code==200){
    //       // console.log(res)
    //       this.alltotals=res.data.data.num*this.pageSize
    //       this.getroletwo()
    //     }else{
    //       this.$message.error(res.data.msg)
    //     }
    //   })
    // },
    // getroletwo(){
    //   this.$http.post(this.baseurl+"role/find",{
    //     pageIndex:"1",
    //     pageSize:this.alltotals+""
    //   }).then(res=>{
    //     if(res.data.code==200){
    //       this.checkList=res.data.data.list
    //       this.showroleName()
    //     }else{
    //       this.$message.error(res.data.msg)
    //     }
    //   })
    // },
    getrole(){
      this.$http.post(this.baseurl+"user/roleList",{
        pageIndex:1,
        pageSize:this.alltotals
      }).then(res=>{
        if(res.data.code==200){
          this.checkList=res.data.data
          // this.showroleName()
        }else{
          this.$message.error(res.data.msg)
        }
      })
    },
    //根据菜单名查询
    findmenuName(){ 
				this.$http.post(this.baseurl+"menu/menuInfo?menuId="+Number.parseInt(this.menuId))
        .then(res=>{
          // console.log(res)
          if(res.data.code==200){
            this.formData=res.data.data
            if(this.formData.menuSuperiors == null){
              this.formData.menuSuperiors="请选择父级"
            }
            var str = this.formData.roleName
            while(str.indexOf(",") != -1){
              this.checkList2.push(str.substring(0,str.indexOf(",")))
              str = str.substring(str.indexOf(",")+1)
            }
            this.checkList2.push(str)
            this.showroleName()
          //   let arr=this.checkList2;
          //   let newArr=[]
          //   arr.forEach(v=>{
          //   newArr.push(v.roleName)
          // })
          // this.checkList2=[...newArr]
          }else{
            this.$message.error(res.data.msg)
          }
          
				})
			},
  },
  mounted(){
    this.getrole()
    this.findmenu()
    this.menuId = this.$route.query.menuId
    if (this.menuId  != undefined) {
      this.showflag = false
      this.findmenuName()
    }
  }
}
</script>

<style lang="less"> 
  .menubox{
    .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
   content: '';
   margin-right: 0;
  }
    padding: 40px;
    .header2 {
     display: flex;
     justify-content: space-between;
   }
   .menufrom{
    margin-top: 30px;
   }
   .el-form-item{
    display: flex;
   }
   .el-form-item__content{
    width: 300px;
   }
   .el-dialog--center .el-dialog__body{
    overflow: hidden;
   }
   .el-form-item__label{
      width: 110px;
      text-align: left;
      font-size: 20px;
      color: #333;
   }
   .el-checkbox__input{
    margin-left: 40px;
   }
   .el-checkbox{
    width: 130px;
   }
   .btngroup {
     display: flex;
     position: absolute;
     bottom: 5%;

     .btn {
       padding: 16px 60px;
       border: none;
       border-radius: 4px;
       color: #fff;
       margin: 10px;
       cursor: pointer;
     }

     .go {
       background: #106ab1;
     }

     .cancel {
       background: #999;
     }
   }
   .checkbox{
    width: 40%;
    float: left;
    margin: 10px 0;
   }
  }
</style>